<template>
  <div class="suggest">
    <div class="words">搜索"{{ keywords }}"</div>
    <ul>
      <template v-if="suggestList">
        <li
          v-for="v in suggestList"
          :key="v.id"
          @click="$emit('change', v.keyword)"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            fill="currentColor"
            class="bi bi-search"
            viewBox="0 0 16 16"
          >
            <path
              d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
            />
          </svg>
          <span> {{ v.keyword }}</span>
        </li>
      </template>
      <!-- <template v-if="suggestList.albums">
                <li v-for="v in suggestList.albums" :key="v.id"  @click="$emit('change',v.name)">专辑: {{v.name}}</li>
            </template>
             <template v-if="suggestList.songs">
                <li v-for="v in suggestList.songs" :key="v.id"  @click="$emit('change',v.name)">歌曲: {{v.name}}</li>
            </template> -->
    </ul>
  </div>
</template>
<script>
const delay = (function () {
  let timer = 0
  return function (callback, ms) {
    clearTimeout(timer)
    timer = setTimeout(callback, ms)
  }
})()
export default {
  name: "SearchSuggest",
  props: ["keywords"],
  data() {
    return {
      suggestList: [],
    };
  },
  created() {
    this.loadSuggest(this.keywords);
  },
  watch: {
    keywords(val) {
      delay(()=>{
        this.loadSuggest(val);
      },500)
    },
  },
  methods: {
    loadSuggest(val) {
      return this.$http
        .get("/search/suggest?keywords=" + val + "&type=mobile")
        .then((data) => {
          // console.log(data);
          let result = data.data.result.allMatch;
          this.suggestList = result;
          // console.log(this.suggestList);/
        });
    },
  },
};
</script>
<style lang="less">
.suggest {
  .words {
    margin-left: 10px;
    color: #0080cf;
    line-height: 40px;
    border-bottom: 1px solid #f4f5f6;
  }
  ul {
    margin: 10px 15px;
    list-style: none;
    li {
      line-height: 45px;
      border-bottom: 1px solid #eff0f1;
      span {
        margin-left: 10px;
      }
    }
  }
}
</style>